<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <style type="text/css">
     html, body {
       height: 100%;
       width: 100%;
     }
     #instanceOne {
       width: 100%;
       height: 50%;
       position: relative;
     }
     #instanceTwo {
       margin: 0 auto;
       width: 800px;
       height: 600px;
       position: relative;
     }
     .mirador-app {
       border: 2px solid black;
     }
    </style>
    <title>Mirador</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <h1>This is the first instance</h1>
    <div id="instanceOne"></div>
    <h1>And this is the second instance</h1>
    <div id="instanceTwo"></div>
    <script type="module">
      import Mirador from '../../../src';
      import createConfig from './mirador-configs/double-van-gogh.js';
      const configOne = createConfig('instanceOne');
      const instanceOne = Mirador.viewer(configOne)
      const configTwo = createConfig('instanceTwo');
      const instanceTwo = Mirador.viewer(configTwo)
    </script>
  </body>
</html>
